Uncontrolled Component
https://ja.react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components
非制御コンポーネント
ローカル state を持つコンポーネント
Props による設定が少なく済むので、親コンポーネントの中に入れて使用することが容易
しかし、それらを協調して動作させたい場合など柔軟性に欠ける
e.g.
code:Panel.jsx
function Panel({ title, children }) {
const isActive, setIsActive = useState(false);
return (
<section className="panel">
<h3>{title}</h3>
{isActive ? (
<p>{children}</p>
) : (
<button onClick={() => setIsActive(true)}>
Show
</button>
)}
</section>
);
}
↔ Controlled Component